<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            /* width: 250px;
            height: 280px; */
            /* 
                上：50px 
                右：60px
                下：70px
                左: 90px
                宽：60px+90px = 150px
                高: 50px+70px = 120px
            */
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            /* padding: 50px 60px 70px 90px */
            /* 表示位置之间的关系 */
        }
        .box{
            width: 200px;
            height: 200px;
            margin-top: 50px
            /* padding-left: -50px; */
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">女朋友</div>
    </div>
</body>
</html>
<!-- 
    padding的使用
        - padding在网页中表示内边距，在快递模型中表示填充物(补白)
        - padding内边距通常表示父元素与子元素之间的位置关系
        - padding通常情况下加在父元素上
            - padding会影响当前元素的宽高 会被撑大
            - 为了保证初始的网页布局不被破坏，得减去相应的padding值(当前父级元素一定要有宽高)
        - padding加在子级元素上
            - 也会撑大子级元素
            - 会移动位置
            - 不需要减去padding值
            - 处理导航 padding撑大宽高
        - padding方向值：top、right、bottom、left
            - 只有一个值的时候表示上下左右都加上padding值
            - padding一个值：上下左右
            - padding两个值：上下 左右
            - padding三个值：上 左右 下
            - padding四个值：上 右 下 左 (顺时针)
        - padding能不能为负值？
 -->